<script>
import { GetInfo } from '@/api/jym-index/jym-index'
import * as echarts from "echarts"
export default {
  data(){
    return{
        currentDate: new Date().toLocaleDateString("zh-CN", {
          year: "numeric",
          month: "long",
          day: "numeric",
        }),
        data: {
          week: [
            { usedate: "2025-04-16", selectTotal: 1, selectSum: 0, comName: "电子科技大学" },
            { usedate: "2025-04-16", selectTotal: 1, selectSum: 0, comName: "" },
            { usedate: "2025-04-17", selectTotal: 11, selectSum: 682, comName: "电子科技大学" },
            { usedate: "2025-04-17", selectTotal: 9, selectSum: 688, comName: "重庆科技大学" },
            { usedate: "2025-04-17", selectTotal: 20, selectSum: 1370, comName: "" },
            { usedate: "2025-04-18", selectTotal: 0, selectSum: 0, comName: "" },
            { usedate: "2025-04-18", selectTotal: 0, selectSum: 0, comName: "" },
            { usedate: "2025-04-19", selectTotal: 0, selectSum: 0, comName: "" },
            { usedate: "2025-04-19", selectTotal: 0, selectSum: 0, comName: "" },
            { usedate: "2025-04-20", selectTotal: 1, selectSum: 65, comName: "重庆科技大学" },
            { usedate: "2025-04-20", selectTotal: 1, selectSum: 65, comName: "" },
            { usedate: "2025-04-21", selectTotal: 1, selectSum: 54, comName: "重庆科技大学" },
            { usedate: "2025-04-21", selectTotal: 1, selectSum: 54, comName: "" },
            { usedate: "2025-04-22", selectTotal: 0, selectSum: 0, comName: "" },
            { usedate: "2025-04-22", selectTotal: 0, selectSum: 0, comName: "" },
            { selectTotal: 23, selectSum: 1489, comName: "" },
          ],
          totalCompany: [
            { selectTotal: 5, selectSum: 665, comName: "重庆科技大学", department: 1 },
            { selectTotal: 2, selectSum: 83, comName: "重庆科技大学", department: 2 },
            { selectTotal: 46, selectSum: 3824 },
            { selectTotal: 4, selectSum: 377, comName: "电子科技大学", department: 332 },
          ],
          totalMoney: 20,
          CompanyCz: [{ comPany: "重庆科技大学", totalMoney: 20.0, F0301: 1 }],
        },
        weeklyChart: null,
        companyChart: null,
    }
  },
  computed: {
    totalSelectCount() {
      // 获取最后一个元素，它包含总计
      const lastWeekItem = this.data.week[this.data.week.length - 1]
      return lastWeekItem.selectTotal
    },
    totalSum() {
      // 获取最后一个元素，它包含总计
      const lastWeekItem = this.data.week[this.data.week.length - 1]
      return lastWeekItem.selectSum
    },
    processedWeeklyData() {
      // 按日期分组并合并相同日期的数据
      const dateMap = {}

      this.data.week.forEach((item) => {
        if (!item.date) return // 跳过没有日期的汇总项

        const date = item.date
        if (!dateMap[date]) {
          dateMap[date] = {
            date: date,
            total: 0,
            sum: 0,
            companies: {},
          }
        }

        dateMap[date].total += item.selectTotal
        dateMap[date].sum += item.selectSum

        if (item.comName) {
          if (!dateMap[date].companies[item.comName]) {
            dateMap[date].companies[item.comName] = {
              total: 0,
              sum: 0,
            }
          }
          dateMap[date].companies[item.comName].total += item.selectTotal
          dateMap[date].companies[item.comName].sum += item.selectSum
        }
      })

      // 转换为数组并按日期排序
      return Object.values(dateMap).sort((a, b) => new Date(a.date) - new Date(b.date))
    },
    processedCompanyData() {
      // 处理公司数据，按公司和部门分组
      const result = []

      this.data.totalCompany.forEach((item) => {
        if (item.customer_name) {
          const departmentLabel = item.customer_name

          result.push({
            name: departmentLabel,
            selectTotal: item.total_query_count,
            selectSum: item.total_consumed_tokens,
          })
        } else {
          // 处理没有公司名称的总计项

        }
      })

      return result
    },
  },
  mounted() {
    GetInfo().then((res)=>{
      this.data = res.data
    }),
    this.initWeeklyChart()
    this.initCompanyChart()

    // 响应式调整图表大小
    window.addEventListener("resize", () => {
      this.weeklyChart.resize()
      this.companyChart.resize()
    })
  },
  methods: {
    initWeeklyChart() {
      const chartDom = document.getElementById("weeklyChart")
      this.weeklyChart = echarts.init(chartDom)

      const dates = this.processedWeeklyData.map((item) => {
        // 格式化日期为 MM-DD 格式
        const date = new Date(item.date)
        return `${date.getMonth() + 1}-${date.getDate()}`
      })

      const totalData = this.processedWeeklyData.map((item) => item.total)
      const sumData = this.processedWeeklyData.map((item) => item.sum)

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) => {
            let result = params[0].name + "<br/>"
            params.forEach((param) => {
              const color = param.color
              const seriesName = param.seriesName
              const value = param.value
              result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`
              result += `${seriesName}: ${value}<br/>`
            })
            return result
          },
        },
        legend: {
          data: ["查询次数", "查询消耗token数"],
          bottom: 0,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          top: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: dates,
          axisLine: {
            lineStyle: {
              color: "#ddd",
            },
          },
          axisLabel: {
            color: "#666",
            fontSize: 12,
          },
        },
        yAxis: [
          {
            type: "value",
            name: "查询次数",
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#4361ee",
              },
            },
            axisLabel: {
              color: "#666",
              fontSize: 12,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#eee",
              },
            },
          },
          {
            type: "value",
            name: "查询消耗token数",
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#4895ef",
              },
            },
            axisLabel: {
              color: "#666",
              fontSize: 12,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "查询次数",
            type: "line",
            data: totalData,
            smooth: true,
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              color: "#4361ee",
            },
            lineStyle: {
              width: 3,
            },
          },
          {
            name: "查询消耗token数",
            type: "line",
            yAxisIndex: 1,
            data: sumData,
            smooth: true,
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              color: "#4895ef",
            },
            lineStyle: {
              width: 3,
            },
          },
        ],
      }

      this.weeklyChart.setOption(option)
    },

    initCompanyChart() {
      const chartDom = document.getElementById("companyChart")
      this.companyChart = echarts.init(chartDom)

      const companies = this.processedCompanyData.map((item) => item.name)
      const totalData = this.processedCompanyData.map((item) => item.selectTotal)
      const sumData = this.processedCompanyData.map((item) => item.selectSum)

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["查询次数", "查询消耗token数"],
          bottom: 0,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          top: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: companies,
          axisLabel: {
            interval: 0,
            rotate: 30,
            color: "#666",
            fontSize: 12,
          },
          axisLine: {
            lineStyle: {
              color: "#ddd",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "查询次数",
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#3f37c9",
              },
            },
            axisLabel: {
              color: "#666",
              fontSize: 12,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#eee",
              },
            },
          },
          {
            type: "value",
            name: "查询消耗token数",
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#4895ef",
              },
            },
            axisLabel: {
              color: "#666",
              fontSize: 12,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "查询次数",
            type: "bar",
            data: totalData,
            barWidth: "30%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#3f37c9" },
                { offset: 1, color: "#4361ee" },
              ]),
            },
          },
          {
            name: "查询消耗token数",
            type: "bar",
            yAxisIndex: 1,
            data: sumData,
            barWidth: "30%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4895ef" },
                { offset: 1, color: "#4cc9f0" },
              ]),
            },
          },
        ],
      }

      this.companyChart.setOption(option)
    },
  },
watch: {
    'data.week': {
      deep: true,
      handler() {
        this.initWeeklyChart()
      }
    },
    'data.totalCompany': {
      deep: true,
      handler() {
        this.initCompanyChart()
      }
    }
  }
}
</script>

<template>
  <div id="box" style="width: 100% ">
    <div class="dashboard">
      <header class="dashboard-header">
        <h1>数据统计仪表盘</h1>
        <div class="date">{{ currentDate }}</div>
      </header>

      <div class="summary-cards">
        <div class="card">
          <div class="card-content">
            <h3>查询总次数</h3>
            <div class="card-value">{{ totalSelectCount }}</div>
          </div>
          <div class="card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
          </div>
        </div>

        <div class="card">
          <div class="card-content">
            <h3>查询总消耗token数</h3>
            <div class="card-value">{{ totalSum }}</div>
          </div>
          <div class="card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="8" x2="12" y2="16"></line>
              <line x1="8" y1="12" x2="16" y2="12"></line>
            </svg>
          </div>
        </div>

        <div class="card">
          <div class="card-content">
            <h3>总盈利</h3>
            <div class="card-value">{{ data.totalMoney }}¥</div>
          </div>
          <div class="card-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
              <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
            </svg>
          </div>
        </div>
      </div>

      <div class="charts-container">
        <div class="chart-card">
          <h2>每周数据趋势</h2>
          <div id="weeklyChart" class="chart"></div>
        </div>

        <div class="chart-card">
          <h2>公司数据统计</h2>
          <div id="companyChart" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
:root {
  --primary-color: #4361ee;
  --secondary-color: #3f37c9;
  --accent-color: #4895ef;
  --background-color: #f8f9fa;
  --card-background: #ffffff;
  --text-primary: #333333;
  --text-secondary: #6c757d;
  --border-color: #e9ecef;
  --success-color: #4caf50;
  --info-color: #2196f3;
  --warning-color: #ff9800;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Nunito", sans-serif;
  background-color: var(--background-color);
  color: var(--text-primary);
  line-height: 1.6;
}

.dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.dashboard-header h1 {
  font-size: 1.8rem;
  color: var(--primary-color);
}

.date {
  font-size: 1rem;
  color: var(--text-secondary);
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.card {
  background-color: var(--card-background);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.card-content h3 {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.card-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color);
}

.card-icon {
  background-color: rgba(67, 97, 238, 0.1);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
}

.charts-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.chart-card {
  background-color: var(--card-background);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
}

.chart-card h2 {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.chart {
  height: 350px;
  width: 100%;
}

@media (min-width: 768px) {
  .charts-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .dashboard {
    padding: 1rem;
  }

  .summary-cards {
    grid-template-columns: 1fr;
  }

  .chart {
    height: 300px;
  }
}
</style>
